
    <div class="sub-title">Always square grid item</div>
    <Grid [activeStyle]="false" [data]="data" (onClick)="click($event)"></Grid>
    <br />
    <Grid [activeStyle]="false" [data]="dataList" (onClick)="click($event)"></Grid>
    <br />
    <div class="sub-title">Grid item adjust accroiding to img size</div>
    <Grid class="not-square-grid" [data]="data" [square]="false" (onClick)="click($event)"></Grid>
    <br />
    <div class="sub-title">ColumnNum=3</div>
    <Grid [data]="data" [columnNum]="3" (onClick)="click($event)"></Grid>
    <br />
    <div class="sub-title">No border</div>
    <Grid [data]="data" [hasLine]="false" (onClick)="click($event)"></Grid>
    <br />
    <div class="sub-title">Carousel</div>
    <Grid [data]="data" [isCarousel]="true" (onClick)="click($event)"></Grid>
    <br />
    <div class="sub-title">Custom content</div>
    <Grid
      [data]="data"
      [columnNum]="3"
      [itemStyle]="{ height: '150px', background: 'rgba(0,0,0,.05)' }"
      (onClick)="click($event)"
    ></Grid>
    <br />
    <div class="sub-title">ng-content</div>
    <Grid>
      <Flex *ngFor="let item of gridData; let i = index" [justify]="'center'" [align]="'stretch'">
        <FlexItem *ngFor="let subItem of item; let j = index">
          <div *ngIf="subItem !== null" class="am-grid-item-content" (click)="click(subItem, i * columnNum + j)">
            <div class="am-grid-item-inner-content column-num-{{ columnNum }}">
              <img src="{{ subItem.icon }}" class="am-grid-icon" />
              <div class="am-grid-text">{{ subItem.text }}</div>
            </div>
          </div>
          <div *ngIf="subItem === null" class="am-grid-null-item"></div>
        </FlexItem>
      </Flex>
    </Grid>
  